<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>专版画册</title>
    <link rel="stylesheet" href="__HOME_TMPL__/css/iconfont.css">
    <link rel="stylesheet" href="__HOME_TMPL__/css/weui.css">
    <link rel="stylesheet" href="__HOME_TMPL__/css/jquery-weui.css">
    <link rel="stylesheet" href="__HOME_TMPL__/css/index.css">
	<style>
		#qq,#qq1,#qq2,#phone,#mobile,#contacts{    font-size: 0.7rem;
   
    color: #666666;
    margin-bottom: 5px;}
	</style>
</head>
<body ontouchstart>
<!--top-->
<div class="tab_navs">
    <div class="header" style="background-color: #ff5a00;">
        <div class="h-left">
            <a class="sb-back icon iconfont icon-back icon-backs" href="javascript:history.back(-1)" title="返回"></a>
        </div>
        <div class="h-mid">
            <h4 class="mui-text-center" >企业产品画册、期刊、杂志、说明书</h4>
        </div>
        <div class="h-right">
        </div>
    </div>
</div>
<!--画册参数选择-->
<div class="contents">
    <div class="only_list">
        <form action="" method="post" class="offer_sub">
            <ul class="list_box">
                <!--成品尺寸-->
                <li class="list_item">
                    <!--title-->
                    <h4>成品尺寸</h4>
                    <div class="row">
                        {foreach name="size" item="vo"}
                        <div class="col-xs-6">
                            <label class="set_item" for="chengpin{$vo.id}">
                                <input type="radio" name="chengpin" value="{$vo.id}" id="chengpin{$vo.id}" checked/>
                                <strong>
                                    {if condition="$vo.type eq 1"}
                                    大度
                                    {else/}
                                    正度
                                    {/if}
                                    {$vo.num}开({$vo.long}*{$vo.wide}mm)
                                </strong>
                            </label>
                        </div>
                        {/foreach}
                    </div>
                </li>
                <!--数量-->
                <li class="list_item">
                    <!--title-->
                    <div class="num">
                        <div class="weui-count">
                            <h4 style="display: inline-block">数量：</h4>
                            <div class="counts">
                                <button type="button" class="weui-count__btn weui-count__decrease nums_reduce" ></button>
                                <input class="weui-count__number" type="number" name="nums" id="nums" value="1">
                                <button type="button" class="weui-count__btn weui-count__increase nums_add"></button>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="text-align: center;height: 45px;line-height: 45px;background: #d0bfb0; color: #ffffff;">
                    <h4 style="color: #ffffff;font-size: 0.8rem;">封面封底</h4></li>
                <!--封面材质-->
                <li class="list_item">
                    <h4>封面材质</h4>
                    <div class="row">
                        {foreach name="texturematerial" item="vo"}
                        <div class="col-xs-3" onchange="fengmian({$vo.id})">
                            <label class="set_item" for="cover{$vo.id}">
                                <input type="radio" name="cover" value="{$vo.id}" id="cover{$vo.id}" checked/>
                                <strong>{$vo.name}</strong>
                            </label>
                        </div>
                        {/foreach}
                    </div>
                </li>
                <!--封面纸张克数-->
                <li class="list_item">
                    <h4>封面纸张克数</h4>
                    <div class="row" id="fengnum">
                        {foreach name="papernumber" item="vo"}
                        <div class="col-xs-3">
                            <label class="set_item" for="fengnum{$vo.id}">
                                <input type="radio" name="fengnum" value="{$vo.id}" id="fengnum{$vo.id}" checked/>
                                <strong>{$vo.name}</strong>
                            </label>
                        </div>
                        {/foreach}
                    </div>
                </li>
                <!--后道工序-->
                <li class="list_item lists">
                    <h4>后道工序</h4>
                    <div class="row">
                        {foreach name="postprocess" item="vo"}
                        <div class="col-xs-3 checkboxs">
                            <!--<label class="set_item" onclick="houdao({$vo.id})">-->
                            <label class="set_item" for="work{$vo.id}">
                                <input type="checkbox"  class="work"  id="work{$vo.id}" value="{$vo.id}" />
                                <strong>{$vo.name}</strong>
                            </label>
                        </div>
                        {/foreach}
                    </div>
                    <div class="row" id="jubu" style="display: none;">
                        <div class="col-xs-12">
                            <label class="col-xs-3">
                                局部UV
                            </label>
                            <div class="col-xs-9">
                                <input type="number" name="j_chang"  placeholder="长(mm)"/>*
                                <input type="number" name="j_kuan" placeholder="宽(mm)"/>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="tangjin" style="display: none;">
                        <div class="col-xs-12">
                            <label class="col-xs-3">
                                烫金
                            </label>
                            <div class="col-xs-9">
                                <input type="number" name="t_chang" placeholder="长(mm)"/>*
                                <input type="number" name="t_kuan" placeholder="宽(mm)"/>
                            </div>
                        </div>
                    </div>
                </li>
                <!--装订方式-->
                <li class="list_item">
                    <h4>装订方式</h4>
                    <div class="row">
                        {foreach name="bindingstyle" item="vo"}
                        <div class="col-xs-3">
                            <label class="set_item" for="binding{$vo.id}">
                                <input type="radio" name="binding" value="{$vo.id}"  id="binding{$vo.id}" checked/>
                                <strong>{$vo.name}</strong>
                            </label>
                        </div>
                        {/foreach}
                    </div>
                </li>
                <li style="text-align: center;height: 45px;line-height: 45px;background: #d0bfb0; color: #ffffff;">
                    <h4 style="color: #ffffff;font-size: 0.8rem;">内页</h4></li>
                <!--页码-->
                <li class="list_item">
                    <!--title-->
                    <div class="num">
                        <div class="weui-count">
                            <h4 style="display: inline-block">页码：</h4>
                            <div class="counts">
                                <button type="button" class="weui-count__btn weui-count__decrease pages_reduce" ></button>
                                <input class="weui-count__number" type="number" name="pages" id="pages" value="8">
                                <button type="button" class="weui-count__btn weui-count__increase pages_add"></button>
                            </div>
                        </div>
                    </div>
                </li>
                <!--材质-->
                <li class="list_item">
                    <h4>材质</h4>
                    <div class="row">
                        {foreach name="texturematerial" item="vo"}
                        <div class="col-xs-3"  onchange="pagenum({$vo.id})">
                            <label class="set_item" for="material{$vo.id}">
                                <input type="radio" name="material" value="{$vo.id}"  id="material{$vo.id}" checked/>
                                <strong>{$vo.name}</strong>
                            </label>
                        </div>
                        {/foreach}
                    </div>
                </li>
                <!--纸张克数-->
                <li class="list_item">
                    <h4>纸张克数</h4>
                    <div class="row" id="num">
                        {foreach name="papernumber" item="vo"}
                        <div class="col-xs-3">
                            <label class="set_item" for="num{$vo.id}">
                                <input type="radio" name="num" value="{$vo.id}" id="num{$vo.id}" checked/>
                                <strong>{$vo.name}</strong>
                            </label>
                        </div>
                        {/foreach}
                    </div>
                </li>
            </ul>
            <!--画册隐藏的状态值-->
            <input type="hidden" name="floor" value="1"/>
            <div class="offer_btn">
                <button type="button" class="weui-btn weui-btn_warn">立即报价</button>
            </div>
        </form>
    </div>

    <div class="offer_detial" style="display: none;">
        <div class="detial_box">
            <h4>￥<span id="money"></span><span>元</span><span class="pull-right">时间：<span id="shijian"></span></span></h4>
            <div class="main">
                <p class="chicun">成品尺寸：<span></span> </p>
				<p class="nums">数量：<span></span> </p>
				<p class="feng_caizhi">封面材质：<span></span> </p>
                <p class="feng_pages_num">封面纸张克数：<span></span> </p>
				<p class="gongxu">后道工序：<span></span> </p>
                <p class="zhuangding">装订方式：<span></span> </p>
				<p class="draw_page">页码：<span></span> </p>
                <p class="caizhi">材质：<span></span> </p>
                <p class="pages_num">纸张克数：<span></span> </p>
                <p><span>支付方式：</span>线下到店支付 线上支付</p>
            </div>
        </div>
        <div class="concats">
            <h4 id="address"></h4>
            <p>联系人：<span id="contacts"></span></p>
			<div class="row" style="padding:0 10px;" id="lianxi">
				<!--<a href="tel:"><span class="col-xs-6"  id="phone">手机：</span></a>
				<a href="tel:"><span class="col-xs-6" id="mobile">电话：</span></a>-->
			</div>
            
            <div class="row" style="padding:0 10px;">
			<span id="qq" class="col-xs-6"></span>
			<span id="qq1" class="col-xs-6"></span>
			<span id="qq2" class="col-xs-6" style="padding-left:1.63rem;"></span>
			</div>
           
            <!--<p>微信：<span  id="wx"></span></p>-->
        </div>
    </div>
</div>

<script src="__HOME_TMPL__/js/jquery-2.1.4.js"></script>
<script src="__HOME_TMPL__/js/jquery-weui.js"></script>
<script src="__HOME_TMPL__/js/offer.js"></script>
<script>

    $('.lists').on('click','.checkboxs input',function(){
        if($(this).prop('checked')==true){
            $(this).next().css({
                "color": "#ffffff",
                "background":"#ff5a00",
                'border-radius': '3px',
                'width': '100%',
                'height': '35px',
                'line-height': '35px',
                'display': 'inline-block',
                'border': '0'
            })
            if($(this).val()==2){
                $(this).parent().parent().next().find('input').prop('checked',false).next().css({"background":"#E5E5E5","color":"#555555"});
//                alert(111);
            }
            if($(this).val()==3){
                $(this).parent().parent().prev().find('input').prop('checked',false).next().css({"background":"#E5E5E5","color":"#555555"});
//                alert(222);
            }
        }
        if($(this).prop('checked')==false){
            $(this).next().css({
                "background":"#E5E5E5","color":"#555555"
            })
        }
        if ($(this).val() == 6 && $(this).prop('checked')==true){
            //局部UV
            $("#jubu").show();
        }else if ($(this).val() == 6 && $(this).prop('checked')==false){
            $("#jubu").hide();
        }

        if ($(this).val()== 8 && $(this).prop('checked')==true){
            //烫金
            $("#tangjin").show();
        }else if ($(this).val() == 8 && $(this).prop('checked')==false){
            $("#tangjin").hide();
        }
    })


    //    内页更换纸质  变换纸质对应的纸质克数
    function pagenum($id)
    {
        var url = "{:url('type/getpagenum')}";
        $.ajax({
            url: url,
            data:{
                'cateid' : $id
            },
            type: 'post',
            dataType:'JSON',
            success: function (data) {
                if (data.code == 1){
                    var html_str = '';
                    $.each(data['data'], function (idx, data) {
                        html_str += '<div class="col-xs-3">'
                        +'<label class="set_item">'
                        +'<input type="radio" name="num" value="'+data.id+'"  checked/>'
                        +'<strong>'+data.name+'</strong>'
                        +'</label></div>'
                    })
                }else {
                    alert('该纸张下面没有克数');
                    html_str='';
                }
                $('#num').html(html_str);

            }, error: function () {
                mui.alert("网络异常");
            }
        })

    }


    // 封面更换纸质  变换纸质对应的纸质克数
    function fengmian($id)
    {
        var url = "{:url('type/getpagenum')}";
        $.ajax({
            url: url,
            data:{
                'cateid' : $id
            },
            type: 'post',
            dataType:'JSON',
            success: function (data) {
                if (data.code == 1){
                    var html_str = '';
                    $.each(data['data'], function (idx, data) {
                        html_str += '<div class="col-xs-3">'
                        +'<label class="set_item">'
                        +'<input type="radio" name="fengnum" value="'+data.id+'"  checked/>'
                        +'<strong>'+data.name+'</strong>'
                        +'</label></div>'
                    })
                }else {
                    alert('该纸张下面没有克数');
                    html_str='';
                }
                $('#fengnum').html(html_str);

            }, error: function () {
                mui.alert("网络异常");
            }
        })

    }
    //后道工序 里面的模切分为 压线和复杂形状  只能选一个

    function houdao(id){
        if($(this).find('input:checked').val()==2){
            $(this).parent().next().find('input').prop('checked',false);
        }
        if($(this).find('input:checked').val()==3){
            $(this).parent().prev().find('input').prop('checked',false);
        }
    }
    //立即报价
    $('.offer_btn button').click(function(){
        var works=[],info=[];
        $('input[type=checkbox]:checked').each(function(){
            works.push($(this).val());
            info.push($(this).next().html());
            if($(this).val()==6){
                info.push('('+$('input[name=j_chang]').val()+'*'+$('input[name=j_kuan]').val()+')')
            }
            if($(this).val()==8){
                info.push('('+
                $('input[name=t_chang]').val()+'*'+$('input[name=t_kuan]').val()+')');
            }
        })
        var params=$('.offer_sub').serialize()+'&work='+works.join(',');
        var url = "{:url('type/orderoffer')}";
        $.ajax({
            url: url,
            data: params,
            type: 'POST',
            success:function (data) {
                if(data.code==1){
                    var url = "{:url('order/addorder')}";
                    var detail = '成品尺寸：'+$('input[name=chengpin]:checked').next().text()+
                            '数量：'+$('input[name=nums]').val()+
                            '封面材质：'+$('input[name=cover]:checked').next().text()+
                            '封面纸张克数：'+ $('input[name=fengnum]:checked').next().text()+
                            '后道工序：'+info.join(',')+
                            '装订方式：'+$('input[name=binding]:checked').next().text()+
                            '材质：'+$('input[name=material]:checked').next().text()+
                            '纸张克数：'+ $('input[name=num]:checked').next().text()+
                            '页码：'+$('input[name=pages]').val();
                    var allmoney = data.data;
                    var time = data.time;
                    var nickname = data.nickname;
                    $.ajax({
                        url: url,
                        data:{
                            'name' : '画册',
                            'detail' : detail,
                            'allmoney' : allmoney,
                            'time' : time,
                            'nickname': nickname,
                            'headimgurl' : data.headimgurl
                        },
                        type: 'post',
                        dataType:'JSON',
                        success: function (res) {
                            if (res.code == 1) {
                                // 点击确定切换页面
                                $('.only_list').hide().next().show();
                                if($('.offer_detial').css('display')=="block"){
                                    $('body,html').css("background","#ffffff");
                                    $('.contents').css("padding","15px");
                                    $('.h-mid h4').html("报价详情");
                                    $('.chicun span').html($('input[name=chengpin]:checked').next().html());
                                    $('.zhuangding span').html($('input[name=binding]:checked').next().html());
                                    $('.caizhi span').html($('input[name=material]:checked').next().html());
                                    $('.pages_num span').html($('input[name=num]:checked').next().html());
                                    $('.feng_caizhi span').html($('input[name=cover]:checked').next().html());
                                    $('.feng_pages_num span').html($('input[name=fengnum]:checked').next().html());
                                    $('.gongxu span').html(info.join(','));
                                    $('.draw_page span').html($('input[name=pages]').val());
                                    $('.nums span').html($('input[name=nums]').val());
                                    $("#money").html(data.data);
                                    $("#shijian").html(data.time);
                                    //系统配置
                                    $("#address").html(data.system['s_address']);
                                    $("#contacts").html(data.system['s_contacts']);
                                    //$("#phone").html("手机："+data.system['s_phone']);
                                    //$("#mobile").html("电话："+data.system['s_mobile']);
									$html_str = '<a href="tel:'+data.system['s_phone']+'"><span class="col-xs-6">手机：'+data.system['s_phone']+'</span></a>'+
									'<a href="tel:'+data.system['s_mobile']+'"><span class="col-xs-6">电话：'+data.system['s_mobile']+'</span></a>'
									$("#lianxi").html($html_str);
									
									
                                    
									$("#qq").html("QQ："+data.system['s_email']);
                                    $("#qq1").html(data.system['s_email_1']);
                                    $("#qq2").html(data.system['s_email_2']);
                                    <!--$("#wx").html(data.system['s_website']);-->
                                }
                            }else {
                                alert("网络开小差，请稍后再试！");
                            }

                        }, error: function () {
                            alert("网络异常");
                        }
                    })
                }else{
                    alert(data.msg);
                }
            }
        })
    })

</script>
</body>
</html>